<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0 ;
				padding: 0;;
			}
			.zhu{
				width: 100vw;
				height: 100vh;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid black;
			}
			canvas{
				border: 1px dashed blue;
				width: 400px;
				height: 400px;
			}
			
		</style>
	</head>
	<body>
		<div class="zhu">
			<canvas id="canvasone" width="400px" height="400px"></canvas>
			<canvas id="canvastwo" width="400px" height="400px"></canvas>
		</div>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			let oneCanvas=document.getElementById('canvasone');
			let oPen=oneCanvas.getContext('2d');
			
			let twoCanvas=document.getElementById('canvastwo');			
			let tPen=twoCanvas.getContext('2d');
			console.dir(oPen);
			
			oPen.moveTo(0,0);
			oPen.lineTo(400,400);
			oPen.moveTo(400,0);
			oPen.lineTo(0,400);
			
			oPen.moveTo(70,20);
			oPen.lineTo(150,20);
			
			oPen.moveTo(70,20);
			oPen.lineTo(110,88);
			
			oPen.moveTo(150,20);
			oPen.lineTo(110,88);
			oPen.stroke();
			
			oPen.fillStyle='green'
			oPen.strokeStyle='darkgoldenrod'
			oPen.strokeRect(50,80,200,200);
			
			
			
			oPen.stroke();
			
			tPen.fillStyle="yellow";
			tPen.fillRect(100,100,200,200);
			tPen.fillStyle="rgba(0,0,255,0.3)";
			tPen.fillRect(200,200,300,300);
			
			tPen.moveTo(50,50);
			tPen.lineTo(350,50);
			
			tPen.moveTo(200,50);
			tPen.lineTo(200,350);
			
			tPen.moveTo(150,200);
			tPen.lineTo(250,200);
			
			tPen.moveTo(50,350);
			tPen.lineTo(350,350);
			tPen.stroke();
			
		}
	</script>
</html>
